<template>
	<div class="container" v-if="study">
		<!-- 标题区域 -->
		<div class="title-card card">
			<div class="card-header">
				<div class="card-tag bg-blue"></div>
				<span class="card-title">学习任务</span>
			</div>
			<div class="card-content">
				<span class="task-name">{{ study.taskName }}</span>
			</div>
		</div>

		<div class="content-wrapper">
			<!-- 学习说明区域 -->
			<div class="desc-card card">
				<div class="card-header">
					<div class="card-tag bg-blue"></div>
					<span class="card-title">学习说明</span>
				</div>
				<div class="card-content">
					<!-- <u-read-more showHeight="200" textIndent="0" class="read-more"> -->
						<div v-html="'学习说明：' + study.description"></div>
					<!-- </u-read-more> -->
				</div>
			</div>

			<!-- 资源展示区域 -->
			<div class="resources-container">
				<!-- 图片展示区域 -->
				<div class="images-card card">
					<div class="card-header">
						<div class="card-tag bg-blue"></div>
						<span class="card-title">图片预览</span>
					</div>
					<div class="card-content">
						<div class="image-scroll">
							<div class="image-list">
								<image-preview v-for="(img, index) in imageList"  :src="img" @click="previewImage(img)" class="image-item" />
							</div>
						</div>
					</div>
				</div>

				<!-- 视频展示区域 -->
				<div class="videos-card card">
					<div class="card-header">
						<div class="card-tag bg-blue"></div>
						<span class="card-title">视频任务</span>
					</div>
					<div class="card-content">
						<div class="video-grid">
							<!-- 九宫格视频项 -->
							<div class="video-grid-item" v-for="(video, i) in videoList" :key="i"
								@click="gotoStudyPage(video, i)">
								<!-- 视频容器 -->
								<div class="video-container">
									<img src="@/assets/images/mr/bg_01.jpg" class="video-thumb">
									<el-icon name="play-circle-fill" color="#66666690" size="40"
										class="play-icon"></el-icon>
								</div>
								<div class="video-info">
									<div class="jindu jindu1" v-if="i == 0"><span>33</span>%</div>
									<div class="jindu jindu2" v-if="i == 1"><span>62</span>%</div>
									<div class="jindu jindu3" v-if="i == 2"><span>85</span>%</div>
									<!-- <div class=""><u-tag text="标签" plain size="mini"> </u-tag></div> -->
									<div class="title">视频标题</div>
								</div>
								<!-- 去学习按钮 -->
								<img src="@/assets/images/mr/videoBtn.png" class="study-btn">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { listTask, getTask, delTask, addTask, updateTask } from "@/api/demo/task/task";

import {
	mapState
} from 'vuex';
export default {
	computed: {
		...mapState(['userInfo', 'locateInformation']),
		// 图片列表
		imageList() {
			return this.study?.imagePaths ? this.study.imagePaths.split(",") : [];
		},
		// 视频列表
		videoList() {
			return this.study?.videoPaths ? this.study.videoPaths.split(",") : [];
		}
	},
	data() {
		return {
			id: 0,
			study: null,
			playingIndex: -1 // 当前播放的视频索引
		}
	},
	created() {

	},
	mounted() {
		// 修改获取路由参数的方式
		this.id = this.$route.query.id;
		console.log(this.$route.query)
		// return
		this.getStudyTask();
	},
	methods: {
		// 获取学习任务详情
		getStudyTask() {
			getTask(this.id)
				.then(res => {
					if (res.code == 200) {
						this.study = res.data;
					}
				})
				.catch(err => {
					console.log(err, 'catch');
				});
		},

		// 图片预览
		previewImage(img) {
			// 使用基本的图片预览实现
			const urls = this.imageList.map(item => item);
			const current = img;
			// 可以使用Element UI的图片预览或其他实现方式
			window.open(current);
		},

		// 跳转到学习页面
		gotoStudyPage(video, index) {
			// 这里可以根据实际需求传递参数
			this.$router.push(`/study/video?index=${index}&id=${this.id}`);
		}
	}
}
</script>

<style scoped lang="scss">
/* 全局样式 */
.container {
	min-height: 100vh;
	background-color: #f8fafc;
	padding: 20px;
}

/* 卡片样式 */
.card {
	background-color: #ffffff;
	border-radius: 16px;
	margin-bottom: 30px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.card-header {
	display: flex;
	align-items: center;
	padding: 30px 30px 20px;
	position: relative;
}

.card-tag {
	width: 8px;
	height: 18px;
	border-radius: 4px;
	margin-right: 16px;
}

.bg-blue {
	background-color: #3C9CFF;
}

.card-title {
	font-size: 16px;
	font-weight: 500;
	color: #333333;
}

.card-content {
	padding: 0 30px 30px;
}

/* 标题卡片 */
.title-card .card-content {
	padding: 20px 30px 40px;
}

.task-name {
	font-size: 18px;
	font-weight: 600;
	color: #1D2129;
	line-height: 1.4;
}

/* 描述区域 */
.read-more {
	font-size: 16px;
	line-height: 1.8;
	color: #666666;
}

/* 图片区域 */
.image-scroll {
	width: 100%;
	padding: 10px 0;
	overflow-x: auto;
	white-space: nowrap;
}

.image-list {
	display: flex;
	flex-direction: row;
}

.image-item {
	width: 150px;
	height: 112px;
	border-radius: 12px;
	margin-right: 15px;
	object-fit: cover;
}

/* 视频区域 */
.video-grid {
	flex-wrap: wrap;
	justify-content: space-between;
}

.video-grid-item {
	display: flex;
	padding: 15px 0;
	border-bottom: 1px solid #f1f1f1;
}

.video-container {
	position: relative;
	width: 150px;
	height: 80px;
	border-radius: 10px;
	overflow: hidden;
}

.video-info {
	padding: 0 10px;
	width: calc(100% - 190px);

	.jindu {
		font-family: fantasy;
		font-size: 12px;
		padding: 8px 0;

		span {
			font-family: fantasy;
			font-size: 16px;
		}
	}

	.jindu1 {
		color: #f56c6c;
	}

	.jindu2 {
		color: #f9ae3d;
	}

	.jindu3 {
		color: #5ac725;
	}

	.title {
		color: #666;
		font-size: 13px;
	}
}

.video-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.play-icon .iconfont {
	color: #ffffff;
	font-size: 30px;
}

.study-btn {
	height: 40px;
	margin: 20px 0;
	width: 40px;
}
</style>